<template>
  <div class="orderPre orderLayout">
    <div class="content">
      <div class="banner">
        <img
          src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/sp/cp/jcbanner.jpg"
        />
      </div>
      <div class="purchaseNum">
        <div>
          <p>购买数量</p>
        </div>
        <div
          style="display: flex; justify-content: flex-end; align-items: center"
        >
          <img
            src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/decre.png"
            @click="reduceNum()"
          />
          <input type="text" disabled name="" v-model="num" />
          <img
            src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/incre.png"
            @click="increaseNum()"
          />
        </div>
      </div>
      <div class="img-wrap history">
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__01.png" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__02.png" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__03.png" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__04.png" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__05.png" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__06.png" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__07.png" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__08.png" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc3_09.png" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__10.png" />
      </div>
    </div>
    <div class="fixnav">
      <div class="info">
        <div>
          <span>总计</span>
        </div>
        <div>
          <ul>
            <li class="amount">
              <span>&yen;</span> {{ totalPrice }}
              <!-- <span style="color: #b7bcb8" v-if="num > 5"> -->
              <span
                style="color: #b7bcb8"
                v-if="totalPrice != totalOriginalPrice"
              >
                (
                <span class="origin">&yen;{{ totalOriginalPrice }}</span>
                )
              </span>
            </li>
            <!-- <li class="tips" v-if="operatorId">6折</li> -->
          </ul>
        </div>
      </div>
      <div class="btn" @click="popupVisible = true">
        <span>立即购买</span>
      </div>
    </div>
    <div class="floating-button" @click="toList()">我的订单</div>
    <mt-popup
      v-model="popupVisible"
      position="center"
      class="popup-alert"
      modal="false"
    >
      <div class="modal-c">
        <div class="main-t">血液脂肪谱检测知情同意书</div>
        <div class="popup-content">
          <div class="p1">
            脂肪酸作为一类重要的营养物质，在人体内发挥着多种重要功能。中长链脂肪酸检测的主要目的是评估您体内欧米伽3、欧米伽6、欧米伽9、以及各类饱和脂肪比例的水平，检查脂代谢与慢性炎症状况，帮助分析深层次患病原因，提醒可能存在的健康风险。该检测可以为医生提供评估、诊断和制定治疗计划的重要依据。
            检测技术局限性及检测风险：
          </div>
          <div class="p1">
            1.本检测技术及相关仪器并非常规临床检测项目，目前主要用于辅助临床诊断或科研等相关目的，本检测结果仅供临床参考，不代表临床诊断意见，需经临床医师结合各方面情况综合判断。
          </div>
          <div class="p1">
            2.由于不可抗拒因素(如寄送途中延误、样本管破裂、实验试剂异常等未符合送样要求)所致的样品损耗，可能会影响样本检测或无法获得检测结果。
          </div>
          <div class="p1">
            3.检测可能存在失败的情况。检测失败可能是由样本送检量不足、送检样本经过额外处理等原因造成的。对于检测失败的样本，检测机构将要求重新补寄样本再次检测，再次检测免费。补寄样本后报告时效从重新收到样本开始计算。对于无法重新获得组织样本或者两次检测失败的情况，将取消检测并全额退还检测费用。对于不可抗力或非检测机构过失造成的检测失败，检测机构不承担因检测失败或样本损失造成的任何后果。
          </div>
          <div class="p1">
            4.检测过程中及知晓结果后，受检者可能出现不同程度的精神压力和负担，对此本机构不承担任何责任。
          </div>
          <div class="sub-t">受检者知情选择:</div>
          <div class="p1">
            1.我已充分了解该检测的性质，预期目的，风险和必要性，目并未得到该检测方法百分之百准确率的许诺；
          </div>
          <div class="p1">2. 我已知晓该检测结果仅作为临床参考；</div>
          <div class="p1">
            3.
            我已知晓可能出现由于不可抗拒因素导致的检测失败，将无法获得检测报告，检测费用予以退还；
          </div>
          <div class="p1">
            4.
            我同意在不泄露可识别本人身份信息的情况下，将样本及检测所得数据用于将来进一步科学研究。
          </div>
          <div class="sub-t">*受检者(监护人)陈述</div>
          <div class="p1">
            我已充分了解该检测的性质、合理的预期目的、风险和必要性，对其中的疑问意见得到医生的解答。我同意进行该项检测、同意回访。
          </div>
        </div>
      </div>
      <div class="sign">
        <div class="submit" @click="toBuy()">确认</div>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import { Toast, MessageBox } from "mint-ui";
import { mapGetters, mapActions } from "vuex";
import { wxshare } from "common/mixin";
export default {
  mixins: [wxshare],
  data() {
    return {
      num: this.$route.query.num || 1,
      from: this.$route.query.from || "",
      giftNum: 0,
      scoreNum: 0,
      productInfo: {},
      totalPrice: null,
      totalOriginalPrice: null,
      popupVisible: false,
      insiderAvailableQuota: 0,
    };
  },
  watch: {
    num: function (newVal) {
      // this.giftNum = parseInt(newVal / 10) * 1;
      // if (newVal > 5||this.operatorId) {
      // if (this.operatorId) {
      //   this.totalPrice = (this.productInfo.price * newVal * 1).toFixed(1);
      // } else {
      //   this.totalPrice = parseInt(this.productInfo.price * newVal);
      // }
      this.totalPrice = this.productInfo.insiderPrice * newVal;
      this.totalOriginalPrice = this.productInfo.price * newVal;
    },
  },
  computed: {
    ...mapGetters(["phone", "insiderName", "operatorId"]),
  },
  methods: {
    ...mapActions({
      GetProducts: "GetProducts",
      GetInsiderAvailableQuota: "GetInsiderAvailableQuota",
    }),
    reduceNum: function () {
      if (this.num == 1) {
        this.num = 1;
      } else {
        this.num = parseInt(this.num) - 1;
      }
    },
    increaseNum: function () {
      let isInsider = this.insiderName && this.from == "insider";
      this.num = parseInt(this.num) + 1;
    },
    // 注册会员
    register: function () {
      this.$router.push({ path: "editInfo" });
    },
    toBuy: function (type) {
      location.href = `order/orderConfirm?rate=0.6&num=${this.num}&operatorId=${this.operatorId}&name=${this.productInfo.name}&insiderPrice=${this.productInfo.insiderPrice}&price=${this.productInfo.price}&pid=${this.productInfo.id}&from=${this.from}&insiderAvailableQuota=${this.insiderAvailableQuota}&ordertest=1`;
    },
    toList() {
      this.$router.push({ path: "/order/orderList" });
    },
  },
  mounted() {
    this.GetProducts().then((result) => {
      console.log("result", result);
      // this.totalPrice = result.data[2].price;
      // this.totalOriginalPrice = result.data[2].price;
      this.productInfo = result.data[3];
      // if (this.operatorId) {
      //   this.totalPrice = (this.productInfo.price * this.num * 1).toFixed(1);
      // } else {
      //   this.totalPrice = parseInt(this.productInfo.price * this.num);
      // }
      this.totalPrice = this.productInfo.insiderPrice * this.num;
      this.totalOriginalPrice = this.productInfo.price * this.num;
    });
  },
};
</script>
<style lang="less">
@import "./orderPre.less";
</style>
